<template>
    <div id="DataDisplayItem">
        <hr/>

        <div v-if="componentType === 'dataItemList'" class="row">
            <div class="col-2">
                <h5>{{ componentTitle }}</h5>
            </div>

            <div class="col-8">
                <ul>
                    <li
                        v-for="item in itemList"
                        :key="item.key"
                        class="itemStyle"
                        :class="item.itemStyle"
                    >
                        {{ item.itemTitle }} : {{ item.itemContent }}
                    </li>
                </ul>
            </div>
        </div>

        <div v-else-if="componentType === 'tagList'" class="row">
            <div class="col-2">
                <h5>{{ componentTitle }}</h5>
            </div>

            <div class="col-8">
                <a-tag
                    v-for="tag in tagList"
                    :key="tag.key"
                    class="tagStyle"
                    :class="tag.tagStyle"
                >
                    {{ tag.tagContent }}
                </a-tag>
            </div>
        </div>

        <div v-else-if="componentType === 'textArea'" class="row">
            <div class="col-2">
                <h5>{{ componentTitle }}</h5>
            </div>

            <div class="col-8" style="word-wrap: break-word;">
                <p :class="textArea.textStyle">
                    {{ textArea.textContent }}
                </p>
            </div>
        </div>

        <div v-else-if="componentType === 'map'" class="row">
            <div class="col-2">
                <h5>{{ componentTitle }}</h5>
            </div>

            <div class="col-8">
                这里按具体使用的接口来定内容
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DataDisplayItem",
        props: {
            componentType: {
                type: String,
                default: 'dataItemList'
            },
            componentTitle: {
                type: String,
                default: '标题'
            },
            itemList: {
                type: Array,
                default: function () {
                    return [
                        { key: 0, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 1, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 2, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 3, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 4, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 5, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 6, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 7, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                        { key: 8, itemStyle: 'itemStyle-two', itemTitle: '宿舍信息', itemContent: 'XXXXX' },
                    ]
                }
            },
            tagList: {
                type: Array,
                default: function () {
                    return [
                        { key: 0, tagStyle: 'tagStyle-red', tagContent: 'tag1' },
                        { key: 1, tagStyle: 'tagStyle-orange', tagContent: 'tag2' },
                        { key: 2, tagStyle: 'tagStyle-green', tagContent: 'tag3' },
                        { key: 3, tagStyle: 'tagStyle-blue', tagContent: 'tag4' },
                        { key: 4, tagStyle: '', tagContent: 'tag5' },
                    ]
                }
            },
            textArea: {
                type: Object,
                default: function () {
                    return {
                        textContent: 'componentTitlecomponentTitlecomponentTitlecomponentTitlecomponentTitlecomponentTitle',
                        textStyle: ''
                    }
                }
            }
        }
    }
</script>

<style scoped>
    #DataDisplayItem{

    }

    .itemStyle{
        display: inline-block;
        margin: 0 0 15px;
    }
    .itemStyle-one{
        width: 100%;
    }
    .itemStyle-two{
        width: 50%;
    }
    .itemStyle-three{
        width: 33.3%;
    }
    .itemStyle-four{
        width: 25%;
    }

    .tagStyle{
        display: inline-block;
        margin: 0 20px 15px 0;
    }
    .tagStyle-red{
        background-color: red;
        color: #ffffff;
    }
    .tagStyle-blue{
        background-color: blue;
        color: #ffffff;
    }
    .tagStyle-green{
        background-color: green;
        color: #ffffff;
    }
    .tagStyle-yellow{
        background-color: yellow;
        color: #ffffff;
    }
    .tagStyle-orange{
        background-color: orange;
        color: #ffffff;
    }
</style>
